<template>
  <div class="container">
    <div class="grid-item" v-for="(item, index) in steps" :key="index" :class="{ 'last-child': index === steps.length - 1 }" @click="$emit('clickItem', item)">
      <div class="step">
        <div class="first-row" :class="extractClass(item.title)" :style="extractStyle(item.title)">{{ extractLabel(item.title) }}</div>
        <div class="second-row" :class="extractClass(item.subtitle)" :style="extractStyle(item.subtitle)">{{ extractLabel(item.subtitle) }}</div>
        <div class="third-row" :class="extractClass(item.description)" :style="extractStyle(item.description)">{{ extractLabel(item.description) }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

// 横向步聚图
export default defineComponent({
  name: 'flowChart',
  props: {
    steps: { // 数据参考data里的样本数据
      type: Array,
      default: () => []
    },
    dark: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      /* steps: [{
        title: {
          label: '开料',
          class: 'text-primary'
        },
        subtitle: '未开始',
        description: {
          label: '截止时间:2014/10/10',
          style: 'background-color: #f5f5f5!important'
        }
      }, {
        title: {
          label: '开料',
          class: 'text-primary'
        },
        subtitle: '未开始',
        description: {
          label: '截止时间:2014/10/10',
          style: 'background-color: $grey-2'
        }
      }] */
    }
  },
  mounted () {
    const fontColor = this.dark ? '#ffffff' : '#000000';
    const bgColor = this.dark ? '#475162' : '#ffffff';
    document.documentElement.style.setProperty('--font-color', fontColor);
    document.documentElement.style.setProperty('--bg-color', bgColor);
  },
  methods: {
    extractClass (item) { // 提取class
      if (typeof item === 'object' && item.class) {
        return item.class;
      } else {
        return '';
      }
    },
    extractStyle (item) { // 提取style
      if (typeof item === 'object' && item.style) {
        return item.style;
      } else {
        return '';
      }
    },
    extractLabel (item) {
      if (typeof item === 'object') {
        return item.label || '';
      } else {
        return item;
      }
    }
  }
});
</script>

<style lang="scss" scoped>
// 可配置的参数
$lineWidth: 26px; // 步骤间连线长度
$rowDistance: 40px; // 行间距
$colDistance: $lineWidth; // 列间距
$arrowSize: 8px; // 箭头大小
$stepColor: #1976D2; // 步骤颜色

// 容器样式
.container {
  display: flex; // 使用 Flex 布局
  align-items: center; // 垂直居中对齐
  gap: $colDistance; // 列间距
  // padding-top: $rowDistance; // 上方内边距
  overflow-x: auto; // 水平滚动
  white-space: nowrap; // 不换行
  color: var(---font-color);
}

// 步骤项样式
.grid-item {
  position: relative; // 相对定位，用于伪元素
  display: flex; // 使用 Flex 布局
  align-items: center; // 垂直居中对齐
  justify-content: center; // 水平居中对齐
  background-color: var(--bg-color); // 添加白色背景

  &.last-child { // 最后一个步骤项
    &::before, // 移除虚线
    &::after { // 移除箭头
      display: none;
    }
  }

  &::before { // 虚线
    position: absolute; // 绝对定位
    content: ''; // 必须设置内容为空
    right: calc($lineWidth * -1); // 从右侧边框开始绘制
    width: $lineWidth; // 线条宽度
    height: 0; // 高度为 0
    border-top: 2px dashed $stepColor; // 虚线样式
  }

  &::after { // 箭头
    content: ''; // 必须设置内容为空
    position: absolute; // 绝对定位
    right: calc($colDistance * -1 + $arrowSize / 2); // 从右侧边框开始绘制
    transform: translateX(50%); // 向左移动一半距离
    border-top: calc($arrowSize / 1.4) solid transparent; // 上方透明边框
    border-left: $arrowSize solid $stepColor; // 左侧实线边框
    border-bottom: calc($arrowSize / 1.4) solid transparent; // 下方透明边框
  }

  .step { // 步骤框
    position: relative; // 相对定位
    width: 120px; // 宽度
    // line-height: 30px; // 行高
    font-size: 14px; // 字体大小
    text-align: center; // 文本居中
    border: 2px solid $stepColor; // 边框样式
    border-radius: 4px; // 圆角

    .first-row { // 第一行
      // background-color: $green-1; // 底色浅绿色
      border-bottom: 1px solid $stepColor; // 下边框
      font-weight: bold; // 字体加粗
      padding: 3px; // 内边距
      width: 100%; // 宽度 100%
    }

    .second-row, .third-row { // 第二、三行
      font-size: 12px; // 字体小一点
      padding: 1px; // 内边距
      width: 100%; // 宽度 100%
    }
  }
}
</style>
